<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "景区详情",
    },
}
</route>

<template>
    <view class="m-base-box m-spot-detail">
        <view class="u-top-banner" v-if="spotInfo?.images.length > 0">
            <wd-swiper :list="spotInfo?.images" autoplay v-model:current="current" value-key="url"></wd-swiper>
        </view>
        <view class="px-3 py-2">
            <view class="flex items-center gap-1">
                <wd-tag type="danger" mark>{{ spotInfo?.startLevel }}A</wd-tag>
                <wd-text :text="spotInfo?.spotName" size="20px" bold color="#000"></wd-text>
            </view>
            <view class="u-tags flex items-center gap-1 mt-1 mb-1">
                <wd-tag custom-class="space" type="primary" v-for="(item, index) in spotInfo?.spotTags" :key="index">{{
                    item
                }}</wd-tag>
            </view>
            <view class="u-open-time flex items-center gap-2">
                <wd-text text="营业时间" size="12px" bold color="#000"></wd-text>
                <wd-text :text="spotInfo?.openingTime" size="12px" bold color="#000" class="pl-1"></wd-text>
            </view>
            <view class="u-base-info flex justify-between items-center gap-2 mt-1">
                <wd-text :text="spotInfo?.address" size="12px" color="#000"></wd-text>
                <view class="u-btn flex items-center gap-3 shrink-0 w-[60px]">
                    <view class="flex flex-col items-center gap-1" @click="handleClickLocation">
                        <wd-icon name="location" size="14px"></wd-icon>
                        <wd-text text="导航" size="12px" color="#000"></wd-text>
                    </view>
                    <view class="flex flex-col items-center gap-1" @click="handleClickPhone">
                        <wd-icon name="call" size="14px"></wd-icon>
                        <wd-text text="电话" size="12px" color="#000"></wd-text>
                    </view>
                </view>
            </view>
        </view>
        <view class="u-ticket-list mt-2">
            <!-- 门票信息区域 -->
            <wd-card title="门票">
                <wd-cell-group>
                    <wd-cell :title="item.name" v-for="(item, index) in ticketList" title-width="100%">
                        <template #label>
                            <view class="flex items-center justify-between">
                                <view class="flex items-center gap-1">
                                    <wd-tag custom-class="space" :type="getTicketStatus(item.status)">{{
                                        getTicketStatusLabel(item.status)
                                    }}</wd-tag>
                                    <wd-text
                                        :text="item?.inventoryCount"
                                        size="12px"
                                        color="#000"
                                        prefix="余"
                                    ></wd-text>
                                </view>
                                <view class="u-buy flex items-center gap-2">
                                    <wd-text
                                        :text="item.oldPrice"
                                        mode="price"
                                        size="12px"
                                        decoration="line-through"
                                        prefix="原价￥"
                                    />
                                    <wd-text :text="item?.price" mode="price" size="16px" color="#E54D42" prefix="￥" />
                                    <wd-button type="warning" size="small" @click="handleBuyTicket(item)"
                                        >购买</wd-button
                                    >
                                </view>
                            </view>
                            <view class="flex items-center gap-1">
                                <view class="flex items-center gap-1"
                                    ><wd-tag custom-class="space" type="warning">已售</wd-tag>
                                    <wd-text :text="item?.sellNum || 0" size="12px" color="#000"></wd-text
                                ></view>
                                <view class="flex items-center gap-1" v-if="userType == 'fz'"
                                    ><wd-tag custom-class="space" type="danger">佣金</wd-tag>
                                    <wd-text
                                        :text="userInfo?.parentId == '0' ? (item.commissionOneDlr + item.commissionTwoDlr) : item.commissionTwoDlr"
                                        size="12px"
                                        color="#000"
                                    ></wd-text
                                ></view>
                            </view>
                        </template>
                    </wd-cell>
                </wd-cell-group>
            </wd-card>
        </view>
        <view class="u-ticket-list mt-2">
            <wd-card title="简介">
                <view class="pb-4">
                    <uv-parse :content="spotInfo?.description"></uv-parse>
                </view>
            </wd-card>
        </view>
        <view class="u-ticket-list mt-2">
            <wd-card title="行程安排">
                <view class="pb-4">
                    <wd-steps vertical dot>
                        <wd-step status="finished" v-for="(item, index) in heritageList" :key="index">
                            <template #title>
                                <!-- <wd-text :text="item.tracingTime" size="12px" color="#000"></wd-text> -->
                                <wd-tag type="primary" round>{{ item.title }}</wd-tag>
                            </template>
                            <template #description>
                                <view class="flex flex-col items-start gap-1 pt-1">
                                    <!-- <wd-tag type="primary" round>{{ item.title }}</wd-tag> -->
                                    <uv-parse :content="item.description"></uv-parse>
                                    <!-- <wd-text :text="item.description" size="12px" color="#000"></wd-text> -->
                                    <view class="w-[30vw] height-[30vw]">
                                        <wd-img
                                            :src="img?.url"
                                            mode="widthFix"
                                            width="100%"
                                            v-for="img in item?.images || []"
                                        >
                                            <template #error>
                                                <wd-text text="图片加载错误" size="14px" color="#000"></wd-text>
                                            </template>
                                            <template #loading>
                                                <view class="flex justify-center items-center w-[100%]">
                                                    <wd-loading />
                                                </view>
                                            </template>
                                        </wd-img>
                                    </view>
                                </view>
                            </template>
                        </wd-step>
                    </wd-steps>
                </view>
            </wd-card>
        </view>
        <view class="u-ticket-list mt-2" v-if="spotInfo?.plat?.url">
            <wd-card title="景点地图">
                <view class="pb-4">
                    <wd-img :src="spotInfo?.plat?.url" mode="widthFix" width="100%">
                        <template #error>
                            <wd-text text="暂无地图" size="14px" color="#000"></wd-text>
                        </template>
                        <template #loading>
                            <view class="flex justify-center items-center w-[100%]">
                                <wd-loading />
                            </view>
                        </template>
                    </wd-img>
                </view>
            </wd-card>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { getCommentUsingGet, getSpotHeritageUsingGet, getSpotInfoUsingGet, getTicketUsingGet } from "@/service/app";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const current = ref<number>(0);

// 获取景点信息
const spotInfo = ref<any>({});
function getSpotInfo(spotId: string) {
    getSpotInfoUsingGet({ params: { spotId } }).then((res) => {
        // console.log("getSpotInfo", res);
        spotInfo.value = res?.data || {};
    });
}
// 获取景点门票
const ticketList = ref([]);
function getTicketList(spotId: string) {
    getTicketUsingGet({ params: { spotId } }).then((res) => {
        console.log("getTicketList", res);
        ticketList.value = res?.data || [];
    });
}
// 门票状态判断
function getTicketStatus(status: string) {
    switch (status) {
        case "STOPSALE":
            return "danger";
        case "ONSALE":
            return "success";
        case "PRESALE":
            return "warning";
        default:
            return "primary";
    }
}
function getTicketStatusLabel(status: string) {
    switch (status) {
        case "STOPSALE":
            return "停售";
        case "ONSALE":
            return "在售";
        case "PRESALE":
            return "预售";
        default:
            return "未知";
    }
}
// 购票操作
function handleBuyTicket(item: any) {
    uni.navigateTo({
        url: `/pages/scenicSpot/buy?spotId=${item?.spotId}&spotName=${spotInfo.value?.spotName}&ticketId=${item?.id}&ticketName=${item?.name}`,
    });
}
// 获取景点评论
// const commentList = ref<any>([]);
// function getCommentList(spotId: string) {
//     getCommentUsingGet({ params: { spotId } }).then((res) => {
//         console.log("getCommentList", res);
//         commentList.value = res?.data || [];
//     });
// }
// 获取景点heritage
const heritageList = ref([]);
function getHeritageList(spotId: string) {
    getSpotHeritageUsingGet({ params: { spotId } }).then((res) => {
        // console.log("getHeritageList", res);
        heritageList.value = res?.data.reverse() || [];
    });
}
function handleClickLocation() {
    let latitude = Number(spotInfo.value?.latitude);
    let longitude = Number(spotInfo.value?.longitude);
    uni.openLocation({
        latitude,
        longitude,
        success: function () {
            console.log("success");
        },
    });
}
function handleClickPhone() {
    uni.makePhoneCall({
        phoneNumber: spotInfo.value?.contactPhone,
    });
}
const userInfo = ref("");
const userType = computed(() => {
    return userStore.userType;
});
onLoad(async (value) => {
    userInfo.value = userStore.userInfo;
    getSpotInfo(value.spotId);
    getTicketList(value.spotId);
    getHeritageList(value.spotId);
});
onShareTimeline(() => {
    return {};
});
</script>

<style lang="scss" scoped>
.m-spot-detail {
    padding-bottom: 32rpx;
}
</style>
